<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
  <style>
    .el-header{
      position: fixed ;
      z-index: 10;
      overflow: hidden;
    }
    body{
      margin-top: 0;
      margin-left: 0;
      margin-right: 0;
    }
    .el-menu.el-menu--horizontal{
      border-bottom: 0;
    }
    a{
      color: #000;
    }
    a:link {
      text-decoration: none;
    }
    .el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title{
      color: #fff;
    }
    .el-card:hover{
      /*设置图片悬停后缩放1.1倍*/
      transform: scale(1.1);
    }
    .el-card{
      font-weight: bold;
      font-family: cursive;
    }
    a:hover{
      color: red;
    }
    div>p>a{
      color: #666666;
    }
    .el-main>div>div>a{
      background-color: white;
      width: 132px;
      height: 40px;
      display: inline-block;
      text-decoration: none;
      text-align: center;
      line-height: 40px;
      color: #666666;
      /*设置圆角*/
      border-radius: 3px;
      margin-left: 10px;
    }
    .el-main>div>div>a:hover{
      background-color: #272636;
      color: white;
    }
    .d1{
      width: 210px;
      height: 80px;
      border: black 1px solid;
      float: right;
      margin-top: 8px;
    }
    span>img{
      width: 60px;
      height: 50px;
      margin-top: 13px;
      margin-left: 10px;
    }
    .el-button:hover{
      background-color: #272636;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
      <el-header style="background-color: black;width: 100%;height: 120px">
        <div style="height: 55px;width: 1150px;margin: 0 auto">
          <img src="imgs/logo.png" alt="" >
        </div>
        <div style="width: 1200px;margin:0 auto;">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   style="background-color: black;"
                   background-color="#000000"
                   text-color="#ffffff"
                   menu-trigger="hover"
                   collapse-transition
                   active-text-color="#ff0000">
            <!--                         >-->

            <span style="color:red;float: left;position: relative;top: 11px;font-size: 30px;vertical-align: middle">强盛健身</span>
            <el-menu-item index="1" style="margin-right: 40px">首页</el-menu-item>
            <el-submenu index="2" style="margin-right: 40px">
              <template slot="title" >健身服务</template>
              <el-menu-item index="2-1"><a href="courseCoach.html" style="text-decoration: none;color: white">健身指导</a></el-menu-item>
              <el-menu-item index="2-2">器械使用教程</el-menu-item>
              <el-menu-item index="2-3" >线下课程表</el-menu-item>
            </el-submenu>
            <el-menu-item index="3" style="margin-right: 40px"><a href="shopping.html">健身商城</a></el-menu-item>
            <el-submenu index="4" style="margin-right: 40px">
              <template slot="title">个人中心</template>
              <el-menu-item index="4-1">个人资料设置</el-menu-item>
              <el-menu-item index="4-2">消息管理</el-menu-item>
              <el-menu-item index="4-3">社区个人主页</el-menu-item>
              <el-menu-item index="4-4">退出帐号</el-menu-item>
            </el-submenu>
            <el-menu-item index="5" style="margin-right: 40px">健身社区</el-menu-item>
            <el-menu-item index="6" style="margin-right: 40px"><a href="admin.html">后端管理</a></el-menu-item>
            <span style="color: red;float:right;font-size: 10px"><p>全国统一客服、拓展热线</p><p>400-0000-311</p></span>
          </el-menu>
        </div>
    </el-header>
    <el-main >
      <div style="width: 1200px;margin: 0 auto;padding-top: 50px;margin-top:50px" >
        <div >
          <p style="font-size: 14px;"><a href="index.html">首页</a> > <a href="">健身教练团队</a></p>
        </div>
        <div style="background-color: red;width: 100%;height: 100px;">
          <span style="color: white;display: inline-block;margin-top: 38px;margin-left: 100px">请选择教练:</span>
          <a href="javascript:void(0)" @click="all()">全部教练</a>
          <a href="javascript:void(0)" @click="classCoach()">团课教练</a>
          <a href="javascript:void(0)" @click="privateCoach">私人教练</a>
          <div class="d1" style="margin-right: 90px">
            <span>
              <img src="imgs/coach/icon_02.png">
            </span>
            <div style="float: right">
              <span style="font-size:20px;color: black;font-weight: bold;display: block;margin-top: 10px;padding-bottom:5px;border-bottom: 1px black solid;width: 100px">1500人</span>
              <span style="font-size:14px;margin-right: 70px;display: block;margin-top: 8px">精英团队</span>
            </div>
          </div>
          <div class="d1" style="margin-right: 10px;">
            <span>
              <img src="imgs/coach/icon_01.png">
            </span>
            <div style="float: right">
              <span style="font-size:20px;color: black;font-weight: bold;display: block;margin-top: 10px;padding-bottom:5px;border-bottom: 1px black solid;width: 100px">400人</span>
              <span style="font-size:14px;margin-right: 70px;display: block;margin-top: 8px">私教团队</span>
            </div>
          </div>
        </div>
        <el-row gutter="20" style="margin-top: 20px;margin-bottom: 20px">
          <el-col span="6" v-for="a in arr">
            <el-card shadow="never">
              <a href="courseCoach_Detail.html">
              <img :src="a.url" style="width: 100%;">
              <p style="color:red;font-size: 20px;text-align: center;margin: 0;">{{a.name}}</p>
              </a>
            </el-card>
          </el-col>
        </el-row>
        <div style="text-align: center">
          <el-button-group style="margin-right: 10px;margin-bottom: 1px">
            <el-button type="info" icon="el-icon-arrow-left">上一页</el-button>
            <el-button type="info">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
          </el-button-group>
          <el-button type="info" @click="one()">1</el-button>
          <el-button type="info">2</el-button>
          <el-button type="info">3</el-button>
        </div>
      </div>
    </el-main>
    <el-footer style="padding: 0">
    <div style="background-color: black;  color: #fff;text-align: center;padding: 10px 0">
      <p>Copyright © 北京强盛健身有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
      <p>涵盖20余门课程体系，致力于打造权威的健身学习平台</p>
      <p>健身网站WWW.qiangshenjianshen.cn 专注于健身技能培训</p>
    </div>
  </el-footer>
  </el-container>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
  let v = new Vue({
    el: '#app',
    data: function () {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        arr:{name:"",url:""},
      }
    },
    methods:{
      one(){
        axios.get("/coach/selectByClassifyOne").then(function (response) {
          v.arr = response.data;
        })
      },
      privateCoach(){
        axios.get("/coach/selectByClassify1").then(function (response) {
          v.arr = response.data;
        })
      },
      classCoach(){
        axios.get("/coach/selectByClassify2").then(function (response) {
          v.arr = response.data;
        })
      },
      all(){
        axios.get("/coach/select").then(function (response) {
          v.arr = response.data;
        })
      },
      handleSelect(key, keyPath) {
        //key代表index   keyPath代表详细的位置
        console.log(key, keyPath);
      }
    },
    created:function () {
      axios.get("/coach/select").then(function (response) {
        v.arr = response.data;
      })
    }
  })
</script>
</html>